<template>
    <view class="main-container">
        <z-paging 
            ref="paging" 
            class="goods-collect-list"
            v-model="goodsCollectList"
            :scroll-with-animation="true"
            :default-page-size="params.page_size"
            @query="handlerPullRefreshAndMore"
            @scroll="handleScroll"
        >
            <!-- 头部区域开始 -->
            <template #top>
                <TridentFreshSearch @search="searchGoodsCollect"/>
            </template>

            <view class="goods-collect-wrap">
                
                <view class="content">
                    <!-- 骨架屏区域开始 -->
                    <TridentFreshGoodsSkeleton :isShowSkeleton="isShowSkeleton" v-for="(item, index) in 6" :key="index"/>
                    <!-- 骨架屏区域结束 -->

                    <TridentFreshGoodsItem v-for="(item, index) in goodsCollectList" :key="index" :goods="item" optionTxt="取消收藏" @option="handlerCancelCollect"/>
                </view>
            </view>

            <!-- 加载更多提示 -->
            <template #loadingMoreNoMore>
                <view :style=" safeAreaInsets.bottom > 0 ? 'padding-bottom: ' + safeAreaInsets.bottom + 'px': ''" class="no-more" v-if="pageTotal == params.page && pageTotal > 1">我也是有底线的！</view>
            </template>
        </z-paging>

        <!-- 返回顶部 -->
		<TridentFreshBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { reqUserGoodsCollectListAPI, reqCancelUserGoodsCollectAPI } from "@/apis/goodsCollect"

// ---------------- 定义全局变量开始 ----------------
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 请求参数
const params = reactive({
    goods_name: '',
    page: 1,
    page_size: 10
})

// 定义商品收藏列表
const goodsCollectList = ref([])

// 商品评价数量
const total = ref(0)

// 总页数
const pageTotal = ref(0)

const paging = ref()

// 定义是否显示骨架
const isShowSkeleton = ref(false)
// ---------------- 定义全局变量结束 ----------------



// --------------- 搜索收藏的商品开始 ---------------
const searchGoodsCollect = (e:any) => {
    params.goods_name = e.keyword.value
    params.page = 1
    goodsCollectList.value = []

    // 当tab切换或搜索时，可以通过paging.value.reload()刷新整个列表
    paging.value.reload()
}
// --------------- 搜索收藏的商品结束 ---------------



// ---------------- 返回顶部功能开始 ----------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
    paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
    isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// ---------------- 返回顶部功能结束 ----------------



// -------------下拉刷新 + 加载更多开始 -------------
const handlerPullRefreshAndMore = (pageNo:any, pageSize:any) => {
    params.page = pageNo
    getGoodsCollectList()
}
// -------------下拉刷新 + 加载更多结束 -------------



// -------------- 获取收藏列表功能开始 --------------
const getGoodsCollectList = async () => {
    // 显示骨架
    if (params.page == 1) {
        isShowSkeleton.value = true
    }

	// 请求数据
	const result:any = await reqUserGoodsCollectListAPI(params)
	let goodsCollects = result.data.user_goods_collects != null ? result.data.user_goods_collects : []
    total.value = result.data.total
    pageTotal.value = result.data.page_total

    goodsCollects.forEach((item:any) => {
        item.market_price = item.goods_price
        item.price = item.goods_price
        item.cover_url = item.goods_cover_url
    })

    paging.value.complete(goodsCollects);

    // 隐藏骨架
    isShowSkeleton.value = false
}
// -------------- 获取收藏列表功能结束 --------------



// ---------------- 取消收藏功能开始 ----------------
const handlerCancelCollect = (e:any) => {
    uni.showModal({
	    content: '确定要取消吗?',
	    success: async (res) => {
	        if (res.confirm) {
                await reqCancelUserGoodsCollectAPI(e.id)
                uni.showToast({
                    title: '取消成功',
                    duration: 1000
                })

                const index = goodsCollectList.value.findIndex((item:any) => item.id == e.id)
                goodsCollectList.value.splice(index, 1)
	        }
	    }
	})
}
// ---------------- 取消收藏功能结束 ----------------
</script>

<style lang="scss">
.main-container {
    .goods-collect-list {
        .goods-collect-wrap {
            .content {
                padding: 0 10rpx 20rpx 10rpx;
                display: flex;
                flex-wrap: wrap;
            }
        }

        // 没有更多区域
        .no-more {
            text-align: center;
            padding-bottom: 20rpx;
            color: #ccc;
            &::before {
                content: '-------------';
                margin-right: 10rpx;
            }
            &::after {
                content: '-------------';
                margin-right: 10rpx;
            }
        }
    }
}
</style>